﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>MPlayer音乐播放器</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/mplayer.min.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body class="fixed-nav">
<!--<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html"><img src="picture/logo_w.png" alt="logo" class="logo-img"></a>
		</div>
		<div class="collapse navbar-collapse" id="collapse">
			<ul class="nav navbar-nav">
				<li><a href="index.html">首页</a></li>
				<li><a href="download.html">下载</a></li>
				<li class="dropdown active">
					<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">文档 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">全部</a></li>
						<li class="divider"></li>
						<li><a href="#introduce">介绍</a></li>
						<li><a href="#start">开始使用</a></li>
						<li><a href="#diy">自定义</a></li>
						<li><a href="#donate">赞助</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="https://github.com/0936zz/mplayer" target="_blank"><span class="fa fa-github fa-lg"></span></a></li>
			</ul>
		</div>
	</div>
</nav>
<div class="jumbotron">
	<div class="container">
		<h1>MPlayer音乐播放器</h1>
		<p>高度可定制的Web音乐播放器</p>
		<p class="btn-group hidden-xs">
			<a class="btn btn-primary btn-lg" href="http://github.com/0936zz/mplayer" target="_blank"><span class="fa fa-github fa-lg"></span> View On Github</a>
			<a class="btn btn-primary btn-lg" href="download.html"><span class="fa fa-download fa-lg"></span> 下载</a>
		</p>
		<p class="btn-group visible-xs">
			<a class="btn btn-primary" href="http://github.com/0936zz/mplayer" target="_blank"><span class="fa fa-github"></span> Github</a>
			<a class="btn btn-primary" href="download.html"><span class="fa fa-download fa-lg"></span> 下载</a>
		</p>
	</div>
</div>
<div class="container" id="con">
	<div class="pull-left do-content">
		<h2 id="introduce">介绍</h2>
		<h3>何为MPlayer</h3>
		<p>MPlayer是一款基于HTML5编写的高度可定制的音乐播放器插件，已开源在<a href="https://github.com/0936zz/mplayer" target="_blank">Github</a>，欢迎Fork</p>
		<h3>下载</h3>
		<p>请移步<a href="download.html">下载页面</a>下载您所需要的版本</p>
		<div class="alert alert-warning">
			<p><span class="glyphicon glyphicon-exclamation-sign"></span> 如果您仅仅只是使用而不更深层次的研究代码，建议您下载压缩版本，以下代码用压缩版本做演示。</p>
		</div>
		<h2 id="start">开始使用</h2>
		<p>简单的使用MPlayer</p>
		<h3>HTML结构</h3>
		<p>MPlayer完整版的HTML结构，可<a href="#diy">自定义</a></p>
		<pre data-src="code/start-html.html" class="line-numbers" data-line="6,9"><code></code></pre>
		<h3>引入CSS和JS</h3>
		<p>您需要在页面中引入一个CSS和一个JS文件</p>
		<pre data-src="code/start-import.html" class="line-numbers"><code></code></pre>
		<div class="alert alert-warning">
			<p><span class="glyphicon glyphicon-exclamation-sign"></span> 请自行修改路径</p>
		</div>
		<h3>初始化播放器</h3>
		<p>您需要用一段JavaScript代码来创建一个MPlayer播放器</p>
		<pre data-src="code/start-create.js" class="line-numbers"><code></code></pre>
		<h3>参数说明</h3>
		<div class="table-responsive">
			<table class="table table-hover table-striped">
				<tr>
					<th>名称</th>
					<th width="50%">说明</th>
					<th>默认值</th>
					<th>是否选填</th>
					<th>接受类型</th>
					<th>版本号</th>
				</tr>
				<tr>
					<td>containerSelector</td>
					<td>包裹MPlayer播放器的容器，可设置多个</td>
					<td>无</td>
					<td>否</td>
					<td>jQuery Selector</td>
					<td>1.3.3及以上</td>
				</tr>
				<tr>
					<td>songList</td>
					<td>歌曲播放列表，格式请参考mplayer-list.js</td>
					<td>无</td>
					<td>否</td>
					<td>Array</td>
					<td>1.0.0及以上</td>
				</tr>
				<tr>
					<td>defaultImg</td>
					<td>专辑图片错误时显示的图片</td>
					<td>无</td>
					<td>否</td>
					<td>String</td>
					<td>2.0.0及以上</td>
				</tr>
				<tr>
					<td>autoPlay</td>
					<td>初始化完成后是否自动播放</td>
					<td>true</td>
					<td>是</td>
					<td>Boolean</td>
					<td>1.2.0及以上</td>
				</tr>
				<tr>
					<td>playMode</td>
					<td>播放模式（<a href="#mode">关于播放模式</a>）</td>
					<td>0</td>
					<td>是</td>
					<td>Int</td>
					<td>1.0.0及以上</td>
				</tr>
				<tr>
					<td>playList</td>
					<td>第一首播放的歌曲所属的列表序号</td>
					<td>0</td>
					<td>是</td>
					<td>Int</td>
					<td>1.0.0及以上</td>
				</tr>
				<tr>
					<td>playSong</td>
					<td>第一首播放的歌曲在列表中的索引（忽略basic）</td>
					<td>0</td>
					<td>是</td>
					<td>Int</td>
					<td>1.0.0及以上</td>
				</tr>
				<tr>
					<td colspan="6"><div class="text-danger text-center">以下配置项已被移除</div></td>
				</tr>
				<tr>
					<td>playRotate</td>
					<td>播放时专辑图片是否旋转<span class="text-danger">（已于V2.0.0移除）</span></td>
					<td>true</td>
					<td>是</td>
					<td>Boolean</td>
					<td>仅1.3.3</td>
				</tr>
				<tr>
					<td>useDefaultStyle</td>
					<td>您是否正在使用默认样式（如果您对样式有了大幅度调整或重写了样式，请将此项设置为false，否则您的排版可能会错乱）<span class="text-danger">（已于V2.0.0移除）</span></td>
					<td>true</td>
					<td>是</td>
					<td>Boolean</td>
					<td>仅1.3.3</td>
				</tr>
				<tr>
					<td>lrcHeight</td>
					<td>歌词区域的高度（当useDefaultStyle设置为false时本配置项无效）<span class="text-danger">（已于V2.0.0移除）</span></td>
					<td>160</td>
					<td>是</td>
					<td>Int</td>
					<td>仅1.3.3</td>
				</tr>
				<tr>
					<td>beforePlay</td>
					<td>每首歌播放开始前的回调函数，接受一个参数作为歌曲信息<span class="text-danger">（V2.0.0回调函数不在配置项中绑定，<a href="#callback">详情</a>）</span></td>
					<td>无</td>
					<td>是</td>
					<td>Function</td>
					<td>1.3.3及以上</td>
				</tr>
				<tr>
					<td>canPlay</td>
					<td>歌曲缓冲到可以播放时的回调函数（用户跳跃播放时间时同样会触发），接受一个参数作为歌曲信息<span class="text-danger">（已于V2.0.0移除）</span></td>
					<td>无</td>
					<td>是</td>
					<td>Function</td>
					<td>仅1.3.3</td>
				</tr>
			</table>
		</div>
		<h3>回调函数</h3>
		<p>MPlayer2.0.0采用了通过回调函数绑定事件的方法，代码如下</p>
		<pre data-src="code/use-event.js" class="line-numbers"><code></code></pre>
		<div class="table-responsive">
			<table class="table table-hover table-striped">
				<tr>
					<th>函数名</th>
					<th>触发时间</th>
					<th>返回值</th>
				</tr>
				<tr>
					<td>afterInit</td>
					<td>初始化完成</td>
					<td>-</td>
				</tr>
				<tr>
					<td>beforePlay</td>
					<td>播放前</td>
					<td>返回fasle可以取消播放</td>
				</tr>
				<tr>
					<td>timeUpdate</td>
					<td>时间变化时</td>
					<td>-</td>
				</tr>
				<tr>
					<td>end</td>
					<td>播放完毕后</td>
					<td>返回fasle可以取消播放下一首</td>
				</tr>
				<tr>
					<td>mute</td>
					<td>静音状态改变时</td>
					<td>-</td>
				</tr>
				<tr>
					<td>changeMode</td>
					<td>播放模式改变时</td>
					<td>-</td>
				</tr>
			</table>
		</div>
		<p class="text-warning">所有回调函数已使用apply改变了this指向，您可以直接在回调函数中使用this代指MPlayer对象</p>
		<h3>API接口</h3>
		<p>所有API接口在<a href="https://github.com/0936zz/mplayer/blob/develop/js/mplayer.js" target="_blank">开发版的JS文件</a>中已经写有详细注释，此处不再列出</p>
		<h2 id="diy">自定义</h2>
		<p>制作您自己风格的MPlayer</p>
		<h3>说明</h3>
		<p>MPlayer的自定义非常简单，只需添加类名即可，基本无需修改JS代码</p>
		<h3>选择器</h3>
		<p>您可以根据自己的页面重写HTML代码，并给相应的元素添加对应类名。并且您可以自定义样式，JS不会对元素的样式进行修改。</p>
		<div class="table-responsive">
			<table class="table table-hover table-striped">
				<tr>
					<th>序号</th>
					<th>说明</th>
					<th>选择器</th>
					<th>备注</th>
				</tr>
				<tr>
					<td>1</td>
					<td>MPlayer的容器</td>
					<td>通过JS配置项进行设置</td>
					<td>-</td>
				</tr>
				<tr>
					<td>2</td>
					<td>歌曲图片</td>
					<td>.mp-cover</td>
					<td>自动更新src属性</td>
				</tr>
				<tr>
					<td>3</td>
					<td>歌曲名</td>
					<td>.mp-name</td>
					<td>自动更新HTML内容</td>
				</tr>
				<tr>
					<td>4</td>
					<td>歌手名</td>
					<td>.mp-singer</td>
					<td>自动更新HTML内容</td>
				</tr>
				<tr>
					<td>5</td>
					<td>当前时间</td>
					<td>.mp-time-current</td>
					<td>自动更新HTML内容</td>
				</tr>
				<tr>
					<td>6</td>
					<td>总时间</td>
					<td>.mp-time-all</td>
					<td>自动更新HTML内容</td>
				</tr>
				<tr>
					<td>7</td>
					<td>上一首按钮</td>
					<td>.mp-prev</td>
					<td>自动绑定click事件</td>
				</tr>
				<tr>
					<td>8</td>
					<td>播放/暂停按钮</td>
					<td>.mp-pause</td>
					<td>自动绑定click事件 <a href="#help-1">自动添加class #1</a></td>
				</tr>
				<tr>
					<td>9</td>
					<td>下一首</td>
					<td>.mp-next</td>
					<td>自动绑定click事件</td>
				</tr>
				<tr>
					<td>10</td>
					<td>静音/取消静音按钮</td>
					<td>.mp-vol-img</td>
					<td>自动绑定click事件 <a href="#help-2">自动添加class #2</a></td>
				</tr>
				<tr>
					<td>11</td>
					<td>音量调节滑块</td>
					<td>.mp-vol-range</td>
					<td><a href="#help-3">自动绑定事件 #3</a></td>
				</tr>
				<tr>
					<td>12</td>
					<td>当前进度条</td>
					<td>.mp-pro-current</td>
					<td>自动修改width样式</td>
				</tr>
				<tr>
					<td>13</td>
					<td>总进度条</td>
					<td>.mp-pro</td>
					<td>自动绑定click事件（后续考虑取消）</td>
				</tr>
				<tr>
					<td>14</td>
					<td>歌词</td>
					<td>.mp-lrc</td>
					<td>自动更新scrollTop属性</td>
				</tr>
				<tr>
					<td>15</td>
					<td>当前歌词</td>
					<td>.mp-lrc-current</td>
					<td>自动切换元素</td>
				</tr>
				<tr>
					<td>16</td>
					<td>列表名称</td>
					<td>.mp-list-title</td>
					<td>自动更新HTML内容 自动为其li子元素绑定click事件</td>
				</tr>
				<tr>
					<td>17</td>
					<td>当前显示的列表的标题</td>
					<td>.mp-list-title-current</td>
					<td>自动切换元素</td>
				</tr>
				<tr>
					<td>18</td>
					<td>当前显示的列表</td>
					<td>.mp-list</td>
					<td>自动更新HTML内容 自动为其子元素绑定click事件</td>
				</tr>
				<tr>
					<td>19</td>
					<td>当前播放的音乐</td>
					<td>.mp-list-current</td>
					<td>自动切换元素</td>
				</tr>
			</table>
		</div>
		<p class="text-warning">MPlayer的所有选择器均为类选择器，如果您有多个容器，只需在所有容器中添加同样的类名，MPlayer会自动更新所有元素</p>
		<div class="alert alert-info">
			<p># 注释</p>
			<p id="help-1">1. 暂停时为mp-pause类，应设置播放图片；开始播放后会添加mp-play类，设置暂停图片。请确保mp-play的权重大于mp-pause</p>
			<p id="help-2">2. 同上，静音时会添加mp-mute类</p>
			<p id="help-3">3. 事件名在配置项中设置，并且需要用代码触发此事件（$.fn.trigger），需要一个value参数</p>
		</div>
		<p>注：有时间可能会写MPlayer定制详细教程</p>
		<h2 id="donate">赞助</h2>
		<p>您的赞助让我更有开发的动力</p>
		<img src="picture/qrcode.png" alt="donate" class="img-responsive">
	</div>
</div>
<footer class="bg-primary">
	<div class="container">
		<p class="pull-right">
			<a href="https://github.com/0936zz/mplayer" target="_blank"><span class="fa fa-github fa-3x"></span></a>
			&nbsp;&nbsp;
			<a href="#"><span class="fa fa-arrow-circle-up fa-3x"></span></a>
		</p>
		<div class="copy">
			<p>&copy;2016 <a href="https://github.com/0936zz" target="_blank">0936zz</a> All rights reserved | 翻版必究</p>
			<p>Powered By <a target="_blank" href="http://getbootstrap.com">Bootstrap</a></p>
		</div>
	</div>
</footer>-->
<div class="mp">
	<div class="mp-box">
		<img src="picture/mplayer_error.png" alt="music cover" class="mp-cover">
		<div class="mp-info">
			<p class="mp-name">燕归巢</p>
			<p class="mp-singer">许嵩</p>
			<p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
		</div>
		<div class="mp-btn">
			<button class="mp-prev" title="上一首"></button>
			<button class="mp-pause" title="播放"></button>
			<button class="mp-next" title="下一首"></button>
			<button class="mp-mode" title="播放模式"></button>
			<div class="mp-vol">
				<button class="mp-vol-img" title="静音"></button>
				<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
					<div class="mp-vol-current"></div>
					<div class="mp-vol-circle"></div>
				</div>
			</div>
		</div>
		<div class="mp-pro">
			<div class="mp-pro-current"></div>
		</div>
		<div class="mp-menu">
			<button class="mp-list-toggle"></button>
			<button class="mp-lrc-toggle"></button>
		</div>
	</div>
	<button class="mp-toggle">
		<span class="mp-toggle-img"></span>
	</button>
	<div class="mp-lrc-box mp-lrc-show">
		<ul class="mp-lrc"></ul>
	</div>
	<button class="mp-lrc-close"></button>
	<div class="mp-list-box">
		<ul class="mp-list-title"></ul>
		<table class="mp-list-table">
			<thead>
				<tr>
					<th>歌名</th>
					<th>歌手</th>
					<th>时长</th>
				</tr>
			</thead>
			<tbody class="mp-list"></tbody>
		</table>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nstslider.min.js"></script>
<script src="js/page.js"></script>
<script src="js/prism.js"></script>
<script src="js/mplayer.min.js"></script>
<script src="js/mplayer-list.js"></script>
<script>
</script>
</body>
</html>